<template>
	<view class="publish-page">

		<view class="item">
			<view class="title">店铺名称</view>
			<input type="text" class="item-input" value="" v-model="dpname" placeholder="请输入店铺名称" />
		</view>

		<view class="item">
			<view class="title">店铺所属地区</view>
			<view class="picker" style="margin-left: 10upx;">
				<picker style="width: 100%;" mode="multiSelector" :range="dmultiArray" @change="areaChange"
					@columnchange="bindMultiPickerColumnChange" :value="dmultiIndex">
					<view class="pciker-content">
						<image class="arrow" src="../../static/img/turn.png"></image>
						<view class="pciker-text">
							{{dmultiArray[0][dmultiIndex[0]]}}，{{dmultiArray[1][dmultiIndex[1]]}}，{{dmultiArray[2][dmultiIndex[2]]}}，{{dmultiArray[3][dmultiIndex[3]]}}
						</view>
					</view>
				</picker>
			</view>
		</view>

		<view class="item" @click="chooseLocation">
			<view class="title">店铺精确位置</view>
			<view class="picker">
				<view class="pciker-content">
					<image class="arrow" src="../../static/img/turn.png"></image>
					<view v-if="address" class="pciker-text">{{address}}</view>
					<view v-else class="pciker-text pciker-text-gray">请选择店铺精确位置</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="title">店铺详细地址</view>
			<input type="text" class="item-input" value="" v-model="mdxxdz" placeholder="xx大厦x层xxxx室" />
		</view>

		<view class="item">
			<view class="title">产品名称</view>
			<input type="text" class="item-input" value="" v-model="protit" placeholder="请输入产品名称" />
		</view>
		<view class="item">
			<view class="title">产品原价</view>
			<input type="text" class="item-input" value="" v-model="proopri" placeholder="请输入产品原价" />
		</view>
		<view class="item">
			<view class="title">产品现价</view>
			<input type="text" class="item-input" value="" :focus="fwf()" v-model="pronpri" placeholder="请输入产品现价" />
		</view>
		<view class="item">
			<view class="title">产品总量</view>
			<input type="text" class="item-input" value="" v-model="pronum" placeholder="请输入剩余产品数量" />
		</view>
		<view class="remark" v-if="userType==20">( 平台收取产品服务费10%，成交后自动扣除 )</view>
		<view class="item" v-if="userType==99 || userType==10">
			<view class="title">产品服务费*单件</view>
			<view class="item-input">{{fuwufei/100}}元</view>
		</view>



		<view style="flex-direction: column;padding-top: 20upx;align-items: flex-start;" class="item">
			<view class="title">广告产品介绍图片</view>
			<view class="video-hint">
				注：最多可添加5张图片
			</view>
			<view class="add-wrap">
				<image src="../../static/img/add_img.png" mode="" class="add-img" @click="chooseImage"></image>
				<view class="img-wrap" v-for="(item,index) in proimg" :key='index'>
					<image src="../../static/img/close.png" mode="" class="close" @click="deleteImage(index)"></image>
					<image :src="item" mode="" class="add-img"></image>
				</view>

			</view>
		</view>

		<view class="next" @click="confirm()">
			<text>上传并支付</text>
		</view>



	</view>
</template>

<script>
	// import common from '../../common.js';
	export default {
		data() {
			return {
				imagePath: '',

				address: '', //店铺精确位置（地图地位中的address）
				addressName: '', //店铺位置的名称（地图地位中的name）
				mdxxdz: '', //店铺详细地址
				pronpri: '', //产品现价
				proopri: '', //产品原价
				protit: '', //产品名称
				pronum: '', //产品总量
				dpname: '', //店铺名称
				fuwufei: '0', //产品服务费
				proimg: [], //产品介绍图片
				proimgid: [], //上传图片返回的id

				latitude: '',
				longitude: '',
				dnui1: [],
				dnui2: [],
				dnui3: [],
				dnui4: [],
				dmultiArray: [
					[],
					[],
					[],
					[]
				],
				dmultiIndex: [0, 0, 0, 0],
				adId: '', //广告id

				provinceId: '',
				cityId: '',
				areaId: '',
				streetId: '',

				adrid: '', //
				amount: '',
				userType:0,
				isUsed:0, //是否使用优惠券
				channelId:0, //投放渠道
				pickupMethod:2, //交易形式

			}
		},
		onLoad(options) {
			this.adId = options.id
			this.amount = options.amount
			this.isUsed = options.isUsed
			this.channelId = options.channelId
			this.pickupMethod = options.pickupMethod
			console.log("onLoad 广告id: ", this.adId);
			this.getUser()
			this.getProvinces()
		},
		methods: {
			getUser(){
				uni.getStorage({
					key: 'user',
					success: res=>{
						this.userType = res.data.type
					}
				})
			},
			formChange(e) {
				console.log("e: ", e);
				this.formIndex = e.detail.value
			},
			typeChange(e) {
				console.log("e: ", e);
				this.typeIndex = e.detail.value
			},

			chooseImage() {
				if (this.proimg.length >= 5) {
					this.toast('最多可添加5张图片')
					return
				}
				uni.chooseImage({
					count: 5 - this.proimg.length,
					sourceType: ['album'],
					success: (res) => {
						console.log("图片选择结果: ", res);
						this.proimg = this.proimg.concat(res.tempFilePaths)
						this.uploadImage(res.tempFilePaths)
					}
				})

			},

			uploadImage(tempFilePaths) {
				for (let i = 0; i < 5; i++) {
					let uploadTask = uni.uploadFile({
						url: getApp().globalData.url + 'file/upload',
						filePath: tempFilePaths[i],
						name: 'file',
						formData: {},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							console.log('图片上传结果：', res);
							if (res.status == 200) {
								let url = res.data.domain + res.data.localPath;
								this.proimgid.push(res.data.id);
								console.log('proimgid:', this.proimgid)
							} else {
								this.toast(res.msg)
							}
						}
					});
					uploadTask.onProgressUpdate(function(res) {});
				}

			},

			deleteImage(index) {
				this.proimg.splice(index, 1)
				this.proimgid.splice(index, 1)
			},

			checkDatas() {

				if (!this.dpname) {
					this.toast('请输入店铺名称')
					return false
				}
				if (!this.latitude) {
					this.toast('请选择店铺精确位置')
					return false
				}
				if (!this.protit) {
					this.toast('请输入产品名称')
					return false
				}
				if (!this.proopri) {
					this.toast('请输入产品原价')
					return false
				}
				if (this.proopri <= 0) {
					this.toast('产品原价必须大于0')
					return false
				}
				if (!this.pronpri) {
					this.toast('请输入产品现价')
					return false
				}
				if (this.pronpri <= 0) {
					this.toast('产品现价必须大于0')
					return false
				}
				// if (this.pronpri > 200) {
				// 	this.toast('产品现价不能大于200元')
				// 	return false
				// }
				if (parseFloat(this.pronpri) > parseFloat(this.proopri) ) {
					this.toast('产品现价不能高于原价')
					return false
				}

				let str = /^\+?[1-9][0-9]*$/;
				if (!this.pronum) {
					this.toast('请输入剩余产品数量')
					return false
				} else if (!(str.test(this.pronum))) {
					this.toast('红包返利利率必须为正整数')
					return false
				}

				if (this.proimg.length <= 0) {
					this.toast('请上传产品介绍图片')
					return false
				}

				return true
			},

			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log("选择位置: ", res);
						// address: "东昌路177号"
						// errMsg: "chooseLocation:ok"
						// latitude: 36.460455
						// longitude: 116.045887
						// name: "当代国际广场"
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.address = res.address

					}
				})
			},

			fwf() {
				let data = {
					amount: this.pronpri * 100
				}
				this.$request.post(`ad/getAdSellServiceAmount`, data,'json')
					.then(res => {
						console.log("服务费: ", res);
						this.fuwufei = res.data.data.serviceAmount
					}).catch(err => {
						console.log(" err:", err)
					})

				// common.request("ad/getAdSellServiceAmount", data, res => {
				// 	console.log("服务费: ", res);
				// 	this.fuwufei = res.data.serviceAmount
				// })
			},

			confirm() {
				if (this.checkDatas()) {
					this.saveOrUpdateLatLon()
				}
			},

			saveOrUpdateLatLon() {
				let data = {
					address: this.address, ////	详细地址		false	string
					id: this.adrid, //	id		false	string
					name: this.mdxxdz, //	小区名		false	string

					provinceId: this.provinceId, //	省		false	string 
					cityId: this.cityId, //	市		false	string
					areaId: this.areaId, //	区		false	string
					streetId: this.streetId, //
					lon: this.longitude, //'116.043516',//	经度
					lat: this.latitude, //'36.461843', //	纬度

					//测试
					// lat: '36.461843', //	纬度		false	string
					// lon: '116.043516', //	经度		false	string
					// provinceId: '370000', //	省		false	string
					// cityId: '371500', //	市		false	string
					// areaId: '371502', //	区		false	string
					// streetId: "371502009",//街道
				}
				this.$request.post(`area/saveOrUpdateLatLon`, data,'json')
					.then(res => {
						console.log("saveOrUpdateLatLon: ", res);
						if (res.data.status == '200') {
							this.saveOrUpdateAdSell(res.data.data);
						} else if (res.data.status == '501') {
							let str = "";
							for (var a in res.data.data) str += res.data.data[a] + ";\n";
							uni.showToast({
								title: str,
								icon: 'none',
								duration: 3000
							});
						}
					}).catch(err => {
						console.log(" err:", err)
					})
				// common.request("area/saveOrUpdateLatLon", data, res => {
				// 	console.log("saveOrUpdateLatLon: ", res);
				// 	if (res.status == '200') {
				// 		this.saveOrUpdateAdSell(res.data);
				// 	} else if (res.status == '501') {
				// 		let str = "";
				// 		for (var a in res.data) str += res.data[a] + ";\n";
				// 		uni.showToast({
				// 			title: str,
				// 			icon: 'none',
				// 			duration: 3000
				// 		});
				// 	}
				// })

			},
			saveOrUpdateAdSell(addressId) {

				let sellPicIdStr = '';
				for (let i = 0; i < this.proimgid.length; i++) {
					if (sellPicIdStr == '') {
						sellPicIdStr = this.proimgid[i];
					} else {
						sellPicIdStr = sellPicIdStr + ',' + this.proimgid[i];
					}
				}

				let data = {
					addressId: addressId, //店铺地址		false							string
					amount: this.pronpri * 100, //	产品现价		false							integer
					id: this.adId, //	id		false							string
					lastNum: this.pronum, //	剩余产品数量		false							integer
					mchName: this.dpname, //	店铺名称		false							string
					name: this.protit, //	产品名称		false							string
					oriAmount: this.proopri * 100, //	产品原价		false							integer
					pastNum: this.pronum, //	已销售产品数量		false							integer
					picIds: sellPicIdStr, //	图片组		false							string
					pickupMethod:this.pickupMethod
				};
				data = JSON.stringify(data);
				console.log("请求参数: ", data);
				// uni.showLoading();

				this.$request.post(`ad/saveOrUpdateAdSell`, data,'json')
					.then(res => {
						console.log("saveOrUpdateAdSell: ", res);
						if (res.data.status == 200) {
							uni.navigateTo({
								url: "/pages/publish/publish-payment?id=" + this.adId + '&amount=' + this
									.amount+ '&type=sell' + '&isUsed=' + this.isUsed+ '&channelId=' + this.channelId
							})
						} else if (res.data.status == 501) {
							let str = "";
							for (var a in res.data.data) str += res.data.data[a] + ";\n";
							console.log(str);
							uni.showToast({
								title: str,
								icon: 'none',
								duration: 3000
							});
						}
					}).catch(err => {
						console.log(" err:", err)
					})

				// common.request("ad/saveOrUpdateAdSell", data, res => {
				// 	console.log("saveOrUpdateAdSell: ", res);
				// 	if (res.status == 200) {
				// 		uni.navigateTo({
				// 			url: "/pages/publish/publish-payment?id=" + this.adId + '&amount=' + this
				// 				.amount
				// 		})
				// 	} else if (res.status == 501) {
				// 		let str = "";
				// 		for (var a in res.data) str += res.data[a] + ";\n";
				// 		console.log(str);
				// 		uni.showToast({
				// 			title: str,
				// 			icon: 'none',
				// 			duration: 3000
				// 		});
				// 	}

				// }, error => {
				// 	uni.hideLoading();
				// 	console.log(error)
				// 	let str = "";
				// 	for (var a in error.data) str += res.data[a] + ";\n";
				// 	uni.showToast({
				// 		title: str,
				// 		icon: 'none',
				// 		duration: 3000
				// 	});
				// })

			},

			bindMultiPickerColumnChange(e) {
				console.log("bindMultiPickerColumnChange: ", e);
				this.dmultiIndex[e.detail.column] = e.detail.value;
				if (e.detail.column == 0) {
					this.provinceId = this.dnui1[e.detail.value].id;
					this.cityId = '';
					this.areaId = '';
					this.streetId = '';
					this.dmultiIndex = [e.detail.value, 0, 0, 0];
					this.getCities();
				} else if (e.detail.column == 1) {
					this.cityId = this.dnui2[e.detail.value].id;
					this.areaId = '';
					this.streetId = '';
					this.dmultiIndex[2] = 0;
					this.dmultiIndex[3] = 0;
					this.getAreas();
				} else if (e.detail.column == 2) {
					this.areaId = this.dnui3[e.detail.value].id;
					this.streetId = '';
					this.dmultiIndex[3] = 0;
					this.getStreets();
				} else if (e.detail.column == 3) {
					this.dmultiIndex[3] = e.detail.value;
					this.streetId = this.dnui4[e.detail.value].id;
					// this.darray = [{
					// 	'name': '',
					// 	'id': ''
					// }];
					// this.xiaoqu();
				}
				this.$forceUpdate()
			},

			getProvinces() {

				this.$request.post(`area/areaList/`, {})
					.then(res => {
						// console.log('省：', res)
						this.provinceId = res.data.data[0].id
						this.dnui1 = res.data.data;
						for (let item of res.data.data) {
							this.dmultiArray[0].push(item.name)
						}
						// this.dmultiArray[0].splice(0, 1)
						this.getCities()
					}).catch(err => {
						console.log(" err:", err)
					})

				// common.request("area/areaList/", {}, res => {
				// 	// console.log('省：', res)
				// 	this.provinceId = res.data[0].id
				// 	this.dnui1 = res.data;
				// 	for (let item of res.data) {
				// 		this.dmultiArray[0].push(item.name)
				// 	}
				// 	// this.dmultiArray[0].splice(0, 1)
				// 	this.getCities()
				// })
			},
			getCities() {
				console.log("provinceID: " + this.provinceId);
				this.$request.post("area/areaList/" + this.provinceId, {})
					.then(res => {
						// console.log('市：', res)
						this.cityId = res.data.data[0].id
						this.dnui2 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(1, 1, list)
						if (!this.cityId) {
							this.cityId = res.data.data[0].id;
						} else {
							for (let i = 0; i < this.dnui2.length; i++) {
								if (this.dpickerid2 == this.dnui2[i].id) {
									this.dmultiIndex[1] = i;
								}
							}
						}
						this.getAreas()
					}).catch(err => {
						console.log(" err:", err)
					})

				// common.request("area/areaList/" + this.provinceId, {}, res => {
				// 	// console.log('市：', res)
				// 	this.cityId = res.data[0].id
				// 	this.dnui2 = res.data
				// 	let list = []
				// 	for (let item of res.data) {
				// 		list.push(item.name)
				// 	}
				// 	this.dmultiArray.splice(1, 1, list)
				// 	if (!this.cityId) {
				// 		this.cityId = res.data[0].id;
				// 	} else {
				// 		for (let i = 0; i < this.dnui2.length; i++) {
				// 			if (this.dpickerid2 == this.dnui2[i].id) {
				// 				this.dmultiIndex[1] = i;
				// 			}
				// 		}
				// 	}
				// 	this.getAreas()
				// })
			},
			getAreas() {
				this.$request.post("area/areaList/" + this.cityId, {})
					.then(res => {
						// console.log('区：', res)
						this.areaId = res.data.data[0].id
						this.dnui3 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(2, 1, list)
						if (!this.areaId) {
							this.areaId = res.data.data[0].id;
						} else {
							for (let i = 0; i < this.dnui3.length; i++) {
								if (this.areaId == this.dnui3[i].id) {
									this.dmultiIndex[2] = i;
								}
							}
						}
						this.getStreets()
					}).catch(err => {
						console.log(" err:", err)
					})
				// common.request("area/areaList/" + this.cityId, {}, res => {
				// 	// console.log('区：', res)
				// 	this.areaId = res.data[0].id
				// 	this.dnui3 = res.data
				// 	let list = []
				// 	for (let item of res.data) {
				// 		list.push(item.name)
				// 	}
				// 	this.dmultiArray.splice(2, 1, list)
				// 	if (!this.areaId) {
				// 		this.areaId = res.data[0].id;
				// 	} else {
				// 		for (let i = 0; i < this.dnui3.length; i++) {
				// 			if (this.areaId == this.dnui3[i].id) {
				// 				this.dmultiIndex[2] = i;
				// 			}
				// 		}
				// 	}
				// 	this.getStreets()
				// })
			},
			getStreets() {
				this.$request.post(`area/areaList/` + this.areaId, {})
					.then(res => {
						// console.log('街道办：', res)
						this.streetId = res.data.data[0].id
						this.dnui4 = res.data.data
						let list = []
						for (let item of res.data.data) {
							list.push(item.name)
						}
						this.dmultiArray.splice(3, 1, list)
						if (!this.streetId) {
							this.streetId = res.data.data[0].id;
						} else {
							for (var i = 0; i < this.dnui4.length; i++) {
								if (this.streetId == this.dnui4[i].id) {
									this.dmultiIndex[3] = i;
								}
							}
						}
					}).catch(err => {
						console.log(" err:", err)
					})
				// common.request("area/areaList/" + this.areaId, {}, res => {
				// 	// console.log('街道办：', res)
				// 	this.streetId = res.data[0].id
				// 	this.dnui4 = res.data
				// 	let list = []
				// 	for (let item of res.data) {
				// 		list.push(item.name)
				// 	}
				// 	this.dmultiArray.splice(3, 1, list)
				// 	if (!this.streetId) {
				// 		this.streetId = res.data[0].id;
				// 	} else {
				// 		for (var i = 0; i < this.dnui4.length; i++) {
				// 			if (this.streetId == this.dnui4[i].id) {
				// 				this.dmultiIndex[3] = i;
				// 			}
				// 		}
				// 	}
				// })
			},

			toast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				});
			}


		}
	}
</script>

<style>
	.publish-page {
		background-color: #F1F1F1;
		padding-bottom: 30upx;
	}

	.publish-page view {
		display: flex;

	}


	.publish-page .item {
		background-color: white;
		width: 650upx;
		margin: 30upx;
		border-radius: 8upx;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 20upx;

	}

	.publish-page .title {
		font-size: 28upx;
	}

	.publish-page .arrow {
		width: 18upx;
		height: 30upx;
	}

	.publish-page .picker {
		flex: 1;
	}

	.publish-page .pciker-content {
		flex: 1;
		flex-direction: row-reverse;
		align-items: center;
	}

	.publish-page .pciker-text {
		margin-right: 20upx;
		font-size: 28upx;
	}

	.publish-page .pciker-text-gray {
		color: #C0C0C0;
	}

	.publish-page .item-input {
		text-align: right;
		font-size: 28upx;
	}

	.publish-page .add-wrap {
		width: 690upx;
		padding: 30upx 0;
		flex-wrap: wrap;
	}

	.publish-page .img-wrap {
		position: relative;
		margin-left: 10upx;
	}

	.publish-page .add-img {
		width: 158upx;
		height: 158upx;
	}

	.publish-page .close {
		width: 48upx;
		height: 48upx;
		position: absolute;
		top: 10upx;
		right: 10upx;
	}

	.publish-page .icon-cloud {
		width: 48upx;
		height: 48upx;
	}

	.publish-page .video-title {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.publish-page .video-hint {
		font-size: 28upx;
		color: #F1C75E;
	}

	.publish-page .video-wrap {
		padding: 20upx 0;
	}

	.publish-page .next {
		width: 80%;
		height: 88upx;
		line-height: 88upx;
		color: white;
		background: -webkit-linear-gradient(#F1C75E, #d4a93c);
		background: -o-linear-gradient(#F1C75E, #d4a93c);
		background: -moz-linear-gradient(#F1C75E, #d4a93c);
		background: linear-gradient(#F1C75E, #d4a93c);
		font-size: 32upx;
		border-radius: 44upx;
		margin: 0 auto;
		justify-content: center;

	}

	.flex {
		display: flex;
		align-items: center;
	}
	.remark{
		margin-left: 30upx;
	}
</style>
